<template>
  <div class="box">
    <!-- 轮播 -->
    <div class="lunbo">
      <!--  -->
      <van-swipe :autoplay="3000" lazy-render :loop="true">
        <van-swipe-item v-for="(image, index) in state.images" :key="index">
          <img :src="image.url" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 快速分类 -->
    <div class="fication">
      <van-grid square column-num="5" :border="false">
        <van-grid-item
          @click="jumps(index)"
          v-for="(value, index) in state.imgage"
          :key="index"
          :icon="value.url"
          :text="value.font"
        />
      </van-grid>
    </div>

    <!-- 广告图片 -->
    <div class="bannerimg">
      <img src="../../../public/img/banner2.png" alt="" />
    </div>
    <div class="fonts">编辑推荐</div>

    <!-- 推荐 -->
    <div class="recommend">
      <ul>
        <li
          v-for="(item, index) in state.edito"
          :key="index"
          @click="a1(item.proId)"
        >
          <div class="leftimg">
            <img :src="item.imgUrl" alt="" />
          </div>
          <div class="righttext">
            <h1>{{ item.title }}</h1>
            <p>
              {{ item.text }}
            </p>
            <div>
              <span>播放量{{ item.plays }}万</span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="fonts">
      <p>热门榜单</p>
      <div>
        <img src="../../../public/img/播放键.png" alt="" />
        <span>播放全部</span>
      </div>
    </div>

    <!-- 热门榜单 -->
    <div class="hotlist">
      <ul>
        <li
          v-for="(item, index) in state.edito"
          :key="index"
          @click="a1(item.proId)"
        >
          <div class="leftimg">
            <img :src="item.imgUrl" alt="" />
          </div>
          <div class="righttext">
            <h1>{{ item.title }}</h1>
            <p>
              {{ item.text }}
            </p>
            <div>
              <span>播放量{{ item.plays }}万</span>
              <img src="../../../public/img/播放键.png" alt="" />
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 查看全部 -->
    <div class="viewall">
      <div>查看全部 ></div>
    </div>

    <div class="fonts">
      <p>本周新书</p>
      <div>
        <span>每周六晚8点半上新</span>
      </div>
    </div>

    <!-- 本周新书 -->
    <div class="newsbook">
      <div class="bg"></div>
      <ul>
        <li v-for="(item, index) in 1" :key="index">
          <div class="leftimg">
            <img src="../../../public/img/解惑.png" alt="" />
          </div>
          <div class="righttext">
            <h1>解惑心智模式决定你的一生</h1>
            <p>四种认知模式助你理解人生真谛</p>
            <div>
              <span>播放量693.2万</span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="fonts">
      <p>热门榜单</p>
      <div>
        <img src="../../../public/img/播放键.png" alt="" />
        <span>播放全部</span>
      </div>
    </div>

    <!--近期新书 -->
    <div class="recentbook">
      <ul>
        <li
          v-for="(item, index) in state.newbook"
          :key="index"
          @click="a1(item.proId)"
        >
          <img :src="item.imgUrl" alt="" />
          <h1>{{ item.title }}</h1>
          <p>播放量{{ item.plays }}万</p>
        </li>
      </ul>
    </div>

    <div class="fonts">
      <p>专属为你推荐</p>
    </div>

    <!-- 专属推荐 -->
    <!-- <div class="exclusive">
      <ul>
        <li v-for="(item, index) in state.newbooks" :key="index">
          <div class="leftimg">
            <img :src="item.imgUrl" alt="" />
          </div>
          <div class="righttext">
            <h1>{{ item.title }}</h1>
            <p>
              有限的生命 如何装下诸多丰盛的理想？ 从为自己的每一个选择负责开始
              这本...
            </p>
            <div class="weeks"></div>
            <div>
              <span>播放量{{ item.plays }}万</span>
            </div>
          </div>
        </li>
      </ul>
    </div> -->

    <van-pull-refresh
      v-model="state.refreshing"
      @refresh="onRefresh"
      offset="50px"
    >
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in state.list" :key="item" :title="item" /> -->
        <div class="exclusive">
          <ul>
            <li
              v-for="(item, index) in state.newbooks"
              :key="index"
              @click="a1(item.proId)"
            >
              <div class="leftimg">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="righttext">
                <h1>{{ item.title }}</h1>
                <p>
                  有限的生命 如何装下诸多丰盛的理想？
                  从为自己的每一个选择负责开始 这本...
                </p>
                <div class="weeks"></div>
                <div>
                  <span>播放量{{ item.plays }}万</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import http from "../../util/http.js";
// 引入better-scroll，用于优化滚动
import BScroll from "better-scroll";
import { onMounted, reactive } from "vue";
import { nextTick } from "@vue/runtime-core";
import { useRouter } from "vue-router";

//定义卸载bsroll
let scroll;

export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      res: null,
      images: [],
      edito: [],
      newbook: [],
      newbooks: [],
      imgage: [
        { font: "心灵", url: require("../../../public/img/第一个图标.png") },
        { font: "管理", url: require("../../../public/img/第二个图标.png") },
        { font: "家庭", url: require("../../../public/img/第三个图标.png") },
        { font: "职场", url: require("../../../public/img/第四个图标.png") },
        { font: "人文", url: require("../../../public/img/第五个图标.png") },
        {
          font: "心选商城",
          url: require("../../../public/img/第六个图标.png"),
        },
        {
          font: "线下活动",
          url: require("../../../public/img/第七个图标.png"),
        },
        {
          font: "学习中心",
          url: require("../../../public/img/第八个图标.png"),
        },
        { font: "签到", url: require("../../../public/img/第九个图标.png") },
        {
          font: "全部分类",
          url: require("../../../public/img/第十个图标.png"),
        },
      ],
      /* 下拉刷新----------------------- */
      loading: false,
      finished: false,
      refreshing: false,
    });
    const onLoad = () => {
      setTimeout(() => {
        if (state.refreshing) {
          state.newbooks = [];
          state.refreshing = false;
        }
        for (let i = 0; i < 1; i++) {
          state.newbooks.push(state.newbooks[1]);
          state.newbooks.push(state.newbooks[4]);
          state.newbooks.push(state.newbooks[5]);
        }
        state.loading = false;

        if (state.newbooks.length >= 15) {
          state.finished = true;
        }
      }, 1000);
    };
    const onRefresh = () => {
      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };
    const a1 = (id) => {
      router.push("/detailspage/audio/" + id);
    };
    /* -------------------- */
    const jumps = (i) => {
      if (i === 5) {
        router.push("/shop");
      }
      if (i === 6) {
        router.push("/activity");
      }
      if (i === 8) {
        router.push("/sign");
      }
    };
    /* 轮播 */
    onMounted(() => {
      getlist();
    });
    const getlist = async () => {
      const reslunbo = await http.get(
        "http://121.199.64.192:3000/api/map/lunbo"
      );
      state.images = reslunbo.data.result;
      const resedito = await http.get(
        "http://121.199.64.192:3000/api/index1/bjtj"
      );
      state.edito = resedito.data.result;
      const resnewbooks = await http.get(
        "http://121.199.64.192:3000/api/index2/jqxs"
      );
      state.newbooks = resnewbooks.data.result;
      state.newbook = resnewbooks.data.result;

      //滑动
      //nexTick在vue3里面是个函数 需要在vue里面解构出来
      nextTick(() => {
        scroll = new BScroll(".recentbook", {
          scrollX: true,
          scrollY: false,
          click: true,
          pullUpLoad: true,
        });

        setTimeout(() => {
          scroll.on("destroy", () => {
            console.log("xiezai");
          });
        }, 10000);
      });
    };
    //BScroll滚动完之后 进行卸载
    // onBeforeUnmount(() => {
    //   scroll.on("destroy", () => {
    //     console.log("xiezai");
    //   });
    // });

    return { state, getlist, onLoad, onRefresh, jumps, a1 };
  },
};
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  padding: 0px;
  /* position: fixed;
  top: 141px;
  left: 0; */
  .lunbo {
    width: 100%;
    height: 121px;
    padding: 0 14px 0 14px;
    margin: auto;
    /deep/.van-swipe-item {
      width: 348px;
      height: 121px;
      text-align: center;
      img {
        width: 100%;
        height: 121px;
      }
    }
    /deep/.van-swipe__indicators {
      display: none;
    }
  }
  .fication {
    padding: 0 26px 0px 25px;
    margin-bottom: 35px;
    /deep/.van-grid-item__content {
      padding: 15px 0 0 0;
      text-align: center;
    }
    /deep/.van-grid {
      display: flex;
      justify-content: space-between;
      height: 160px;
    }
    /deep/.van-icon-photo-o:before {
      height: 44px;
      width: 44px;
    }
    /deep/.van-grid-item__text {
      margin-top: 10px;
      font: 11px/12px "微软雅黑";
      font-weight: bold;
    }
    /* /deep/.van-icon__image {
      border: 1px dashed black;
    } */
  }

  .bannerimg {
    width: 100%;
    height: 115px;
    padding: 0 14px;
    margin-bottom: 20px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .fonts {
    padding-left: 15px;
    font-size: 18px;
    line-height: 17px;
    font-family: "微软雅黑";
    margin-bottom: 12px;
    font-weight: bold;
  }
  .recommend {
    ul {
      li {
        padding: 0 25px 0 15px;
        height: 114px;
        display: flex;
        margin-bottom: 20px;
        .leftimg {
          width: 85px;
          height: 114px;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .righttext {
          padding-top: 5px;
          h1 {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #444243;
            line-height: 15px;
            margin-bottom: 10px;
          }
          p {
            width: 236px;
            font-size: 14px;
            line-height: 16px;
            color: #a9a9a9;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 指定行数*/
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 40px;
          }
          div {
            font-size: 0;
            span {
              font-size: 11px;
              font-weight: bold;
              color: #c9a35c;
            }
          }
        }
      }
    }
  }

  .fonts {
    padding-left: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 18px;
      line-height: 17px;
      font-family: "微软雅黑";
      font-weight: bold;
    }
    div {
      margin-right: 15px;
      img {
        width: 16px;
        height: 16px;
        vertical-align: middle;
        margin-right: 5px;
      }
      span {
        font-size: 13px;
        vertical-align: middle;
        /* font-family: "楷体"; */
      }
    }
  }

  /* 热门榜单 */
  .hotlist {
    ul {
      li {
        padding: 0 25px 0 15px;
        height: 114px;
        display: flex;
        margin-bottom: 20px;
        .leftimg {
          width: 85px;
          height: 114px;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .righttext {
          padding-top: 5px;
          h1 {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #444243;
            line-height: 15px;
            margin-bottom: 10px;
          }
          p {
            width: 236px;
            font-size: 14px;
            line-height: 16px;
            color: #a9a9a9;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 指定行数*/
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 40px;
          }
          div {
            width: 245px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0;
            span {
              font-size: 11px;
              font-weight: bold;
              color: #c9a35c;
            }
            img {
              width: 16px;
              height: 16px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  /* 查看全部 */
  .viewall {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    div {
      width: 104px;
      height: 38px;
      background: #f8f6f7;
      border-radius: 19px;
      text-align: center;
      line-height: 38px;
      font-size: 14px;
      font-family: "PingFang-SC-Medium";
    }
  }
  /* 新书 */
  .newsbook {
    position: relative;
    .bg {
      background: #f6f8f7;
      width: 345px;
      height: 90px;
      position: absolute;
      left: 9px;
      bottom: -0px;
      z-index: 1;
    }
    ul {
      position: relative;
      z-index: 10;
      li {
        padding: 0 25px 0 15px;
        height: 114px;
        display: flex;
        margin-bottom: 20px;
        .leftimg {
          width: 85px;
          height: 114px;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .righttext {
          padding-top: 5px;
          h1 {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #444243;
            line-height: 15px;
            margin-bottom: 10px;
          }
          p {
            width: 236px;
            font-size: 14px;
            line-height: 16px;
            color: #a9a9a9;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 指定行数*/
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 40px;
          }
          div {
            width: 245px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0;
            span {
              font-size: 11px;
              font-weight: bold;
              color: #c9a35c;
            }
            img {
              width: 16px;
              height: 16px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  /* 近期新书 */
  .recentbook {
    width: 100%;
    height: 170px;
    overflow: hidden;
    margin-bottom: 26px;
    display: inline-block;
    ul {
      margin-left: 17px;
      display: inline-flex;
      li {
        width: 80px;
        margin-right: 15px;
        img {
          width: 80px;
          height: 115px;
          background: #c9a35c;
        }
        h1 {
          font: 14px/29px "PingFang-SC-Medium";
          margin: 0px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
        }
        p {
          font: 11px/11px "PingFang-SC-Medium";
          color: #c9a35c;
        }
      }
    }
  }
  /* 专属推荐 */
  .exclusive {
    ul {
      li {
        padding: 0 25px 0 15px;
        height: 114px;
        display: flex;
        margin-bottom: 20px;
        .leftimg {
          width: 85px;
          height: 114px;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .righttext {
          padding-top: 5px;
          h1 {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #444243;
            line-height: 15px;
            margin-bottom: 10px;
          }
          p {
            width: 236px;
            font-size: 14px;
            line-height: 16px;
            color: #a9a9a9;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 指定行数*/
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 40px;
          }
          /* .weeks {
            width: 131px;
            height: 22px;
            background: #fef9d3;
            border-radius: 10px;
            margin-bottom: 16px;
          } */
          div {
            font-size: 0;
            span {
              font-size: 11px;
              font-weight: bold;
              color: #c9a35c;
            }
          }
        }
      }
    }
  }
}
</style>
